<script setup>
import { listNotice } from "@/api/system/notice";
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const { notice_type } = proxy.useDict("sys_notice_type");
const noticeList = ref([]);
const router = useRouter();
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0);
const getNoticeList = async () => {
  const res = await listNotice(queryParams.value);
  noticeList.value = res.rows;
  total.value = res.total;
};
getNoticeList();
</script>
<template>
  <div class="n-list">
    <div
      class="n-list-item"
      v-for="item in noticeList"
      :key="item.noticeId"
      @click="
        router.push({
          path: '/notice',
          query: {
            noticeId: item.noticeId,
          },
        })
      "
    >
      <div class="n-header">
        <div class="n-title">
          {{ item.noticeTitle }}
        </div>
        <div class="time">{{ item.remark }}</div>
      </div>
      <div class="n-footer">
        <el-tag type="success" size="small" v-if="item.noticeType == 1"
          >公告</el-tag
        >
        <el-tag type="warning" size="small" v-else>咨询</el-tag>
        <!-- <dict-tag :options="notice_type" :value="item.noticeType" /> -->
        <div>{{ item.createTime }}</div>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-pagination) {
  --el-pagination-hover-color: #1aa684;
  --el-color-primary: #1aa684;
}
:deep(.el-select-dropdown__item.selected) {
  color: #1aa684 !important;
}
.pagination-container {
  background: none;
}
.n-list {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding-bottom: 20px;

  .n-list-item {
    background: #fff;
    padding: 20px;
    margin-bottom: 10px;
    .n-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      .n-title {
        font-size: 20px;
        font-weight: 600;
        color: #1aa684;
        padding-bottom: 15px;
      }
      .time {
        font-size: 14px;
        color: #666;
      }
    }
    .n-footer {
      display: flex;
      justify-content: space-between;
      color: #ccc;
    }
  }
}
</style>
